<template>
  <div class="course-detail">
    <el-card>
      <template #header>
        <div class="card-header">
          <h3>课程详情</h3>
          <el-button @click="router.back()">返回</el-button>
        </div>
      </template>

      <div v-loading="loading">
        <!-- 课程基本信息 -->
        <div class="info-section">
          <h4>基本信息</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="课程名称">{{
              classInfo.courseName
            }}</el-descriptions-item>
            <el-descriptions-item label="课程代码">{{
              classInfo.courseCode
            }}</el-descriptions-item>
            <el-descriptions-item label="开课时间">{{
              classInfo.startTime
            }}</el-descriptions-item>
            <el-descriptions-item label="最大选课人数">{{
              classInfo.maxStudents
            }}</el-descriptions-item>
            <el-descriptions-item label="课程状态">{{
              classInfo.status === 1
                ? "活跃"
                : classInfo.status === 2
                ? "停用"
                : "归档"
            }}</el-descriptions-item>
            <el-descriptions-item label="是否公开">{{
              classInfo.isPublic ? "公开" : "不公开"
            }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{
              classInfo.createdTime
            }}</el-descriptions-item>
            <el-descriptions-item label="更新时间">{{
              classInfo.updatedTime
            }}</el-descriptions-item>
            <el-descriptions-item label="课程描述" :span="2">{{
              classInfo.description || "暂无描述"
            }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 章节列表 -->
        <div class="student-section">
          <div class="section-header">
            <h4>章节列表</h4>
          </div>

          <el-table
            :data="chapterList"
            border
            style="width: 100%"
            v-loading="chapterLoading"
          >
            <el-table-column type="index" width="50" label="序号" />
            <el-table-column
              prop="chapterName"
              label="章节名称"
              min-width="150"
            />
            <el-table-column prop="content" label="内容" min-width="200" />
            <el-table-column prop="createdTime" label="创建时间" width="180" />
            <el-table-column prop="updatedTime" label="更新时间" width="180" />
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { courseApi } from "../../api/courseApi";
import { ElMessage } from "element-plus";

const router = useRouter();
const route = useRoute();
const loading = ref(false);
const classInfo = ref({});
const chapterList = ref([]);
const chapterLoading = ref(false);

// 获取课程详情
const getCourseDetail = async () => {
  try {
    const res = await courseApi.getCourseDetail(route.params.id);
    classInfo.value = res.result;
  } catch (error) {
    console.error("获取课程详情失败:", error);
  }
};

// 获取章节
const getChapters = async () => {
  chapterLoading.value = true;
  try {
    const res = await courseApi.getChapters(route.params.id);
    chapterList.value = res.result;
  } catch (error) {
    console.error("获取章节失败:", error);
  } finally {
    chapterLoading.value = false;
  }
};

onMounted(() => {
  getCourseDetail();
  getChapters();
});
</script>

<style scoped>
.course-detail {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-section {
  margin-bottom: 30px;
}

.info-section h4 {
  margin-bottom: 20px;
  font-size: 16px;
  color: #303133;
}

.student-section {
  margin-top: 30px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h4 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 20px;
}

.search-input {
  width: 300px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
